import { addMenu, updateMenu } from "@/api/system/menu";
import { Menu } from "@/types/system/menu";
import { Form, Input, message, Modal, Radio, Spin } from "antd";
import { useForm } from "antd/es/form/Form";
import { useEffect, useState } from "react";
interface Props {
  isModalOpen: boolean;
  optionType: "add" | "edit" | "addSub";
  oldInfo?: Menu;
  close?: () => void;
  change?: () => void;
}
export default function OptionForm(props: Props) {
  const [loading, setLoading] = useState(false);
  const [form] = useForm();
  const [messageApi] = message.useMessage();
  /**
   * 添加接口
   * @param data
   */
  const addInf = async (data: Menu) => {
    setLoading(true);
    const res = await addMenu(data);
    setLoading(false);
    if (res.code === 200) {
      messageApi.success("新增成功");
      props.close && props.close();
      props.change && props.change();
    }
  };
  /**
   * 修改接口
   * @param data
   */
  const updateInf = async (data: Menu) => {
    setLoading(true);
    const res = await updateMenu(data);
    setLoading(false);
    if (res.code === 200) {
      messageApi.success("修改成功");
      props.close && props.close();
      props.change && props.change();
    }
  };
  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      const {
        menuName,
        orderNum,
        path,
        isFrame,
        menuType,
        visible,
        status,
        perms,
        icon,
        component,
      } = values;
      const params:Menu = {
        menuName,
        orderNum,
        path,
        isFrame,
        menuType,
        visible,
        status,
        perms,
        icon,
        component,
      };
      if (props.optionType === "add") {
        params.parentId = "0";
        addInf(params);
      } 
      else if (props.optionType === "addSub") {
        // 新增
        params.parentId =props.oldInfo?.id;
        addInf(params);
      }
      else if (props.optionType === "edit") {
        updateInf({
          ...(props.oldInfo || {}),
          ...params,
          id: props.oldInfo?.id,
        });
      }
    } catch (errorInfo) {
      console.log("Failed:", errorInfo);
    }
  };
  useEffect(() => {
    if (props.optionType === "edit") {
      form.setFieldsValue(props.oldInfo || {});
    }
  }, [form, props.oldInfo, props.optionType]);
  return (
    <Modal
      title={props.optionType === "add" ? "新增菜单" : "修改菜单"}
      open={props.isModalOpen}
      onOk={handleOk}
      onCancel={() => props.close && props.close()}
    >
      <Spin spinning={loading}>
        <Form
          form={form}
          name="roleOptionForm"
          size="middle"
          autoComplete="off"
          layout="vertical"
          initialValues={{ menuType: "C",isFrame:1,visible:'0' }}
        >
          <Form.Item<Menu>
            name="menuName"
            label="菜单名称"
            rules={[{ required: true, message: "请输入" }]}
          >
            <Input />
          </Form.Item>
          {props.oldInfo && props.optionType === "addSub" && (
            <Form.Item<Menu>
              name="parentId"
              label="父菜单"
            >
              <Input value={props.oldInfo.menuName} disabled={true} />
            </Form.Item>
          )}
          <Form.Item<Menu>
            name="menuType"
            label="菜单类型"
        
          >
            <Radio.Group
              options={[
                { value: "C", label: "菜单" },
                { value: "M", label: "目录" },
                { value: "F", label: "按钮" },
              ]}
            />
          </Form.Item>
          <Form.Item<Menu>
            name="perms"
            label="权限标识"
          >
            <Input />
          </Form.Item>
          <Form.Item<Menu>
            name="path"
            label="路由"
          >
            <Input />
          </Form.Item>
          <Form.Item<Menu>
            name="component"
            label="页面"
          >
            <Input />
          </Form.Item>
          <Form.Item<Menu>
            name="orderNum"
            label="显示顺序"
            rules={[{ required: true, message: "请输入显示顺序" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<Menu>
            name="isFrame"
            label="是否为外链"
          >
            <Radio.Group
              options={[
                { value: 0, label: "是" },
                { value: 1, label: "否" },
              ]}
            />
          </Form.Item>
          <Form.Item<Menu>
            name="visible"
            label="显隐状态"
          >
            <Radio.Group
              options={[
                { value: '0', label: "显示" },
                { value: '1', label: "隐藏" },
              ]}
            />
          </Form.Item>
          <Form.Item<Menu>
            name="icon"
            label="icon"
          >
            <Input />
          </Form.Item>
        </Form>
      </Spin>
    </Modal>
  );
}
